<!DOCTYPE html>
<html>
<head>
<title>分配角色</title>
#include("/admin/_common/head.html")
<!-- 样 式 文 件 -->
</head>
<!-- 代 码 结 构 -->
<body class="pear-container">
    <form class="layui-form layui-form-pane">
        <input type="hidden" name="id" value="#(bean.id??)">
        <input type="hidden" name="roleIds">
        <div class="layui-card">
            <div class="layui-card-body">
	            <ul class="layui-timeline">
	                <li class="layui-timeline-item">
	                    <i class="layui-icon layui-timeline-axis layui-icon-circle"></i>
	                    <div class="layui-timeline-content layui-text">
	                        <h3 class="layui-timeline-title">基本信息</h3>
		                    <div class="layui-form-item">
		                        <label class="layui-form-label">账号</label>
		                        <div class="layui-input-inline">
		                            <input autocomplete="off" class="layui-input" disabled value="#(bean.account)" />
		                        </div>
		                        <label class="layui-form-label">昵称</label>
		                        <div class="layui-input-inline">
		                            <input autocomplete="off" class="layui-input" disabled value="#(bean.nickname)" />
		                        </div>
		                    </div>
	                    </div>
	                </li>
	                <li class="layui-timeline-item">
	                    <i class="layui-icon layui-timeline-axis layui-icon-circle"></i>
	                    <div class="layui-timeline-content layui-text">
	                    <h3 class="layui-timeline-title">分配角色</h3>
		                	<div class="layui-input-block">
		                    	<div id="beans-transfer"></div>
		                    </div>
	                    </div>
	                </li>
	            </ul>
            </div>
        </div>
        <div class="bottom" style="display: none;">
            <div class="button-container">
                <button onclick="window.checkRoles();" type="submit" class="pear-btn pear-btn-primary pear-btn-xs" lay-submit="" lay-filter="data-save" id="data-save">
                    <i class="layui-icon layui-icon-ok"></i> 提交
                </button>
            </div>
        </div>
    </form>
<!-- 资 源 引 入 -->
#include("/admin/_common/foot.html")
#include("/admin/_common/form_style.html")
<script>
layui.use(['form', 'jquery', 'common'], function() {
    var $ = layui.jquery;
    var form = layui.form;
    var common = layui.common;
    var transfer = layui.transfer;
    
    /*
     * 渲染角色
     */
    window.renderTransfer = () => {
    	transfer.render({
    	    elem: '#beans-transfer',
    	    id: 'beans-transfer-1',
    	    data: window.getRoles(),
    	    title: ['备选角色', '已选角色'],
    	    value: window.getSelectedIds(),
    	    parseData: (res) => {
    	    	return {
    	            "value": res.id, // 数据值
    	            "title": res.name, // 数据标题
    	            "disabled": res.disabled,  // 是否禁用
    	            "checked": res.checked // 是否选中
   	            }
    	    }
   	    });
    };
    
    window.getRoles = () => {
    	var data = [];
        $.ajax({
            url: "#CTX()/admin/system/role/queryList",    //后台数据请求地址
            type: "post",
            data: {"status": "ON"},
            async: false,
            success: function(result){
            	data = result;
            }
        });
        return data;
    };
    
    window.getSelectedIds = () => {
    	var data = [];
        $.ajax({
            url: "#CTX()/admin/system/role/queryByUser?userId=#(bean.id)",    //后台数据请求地址
            type: "get",
            async: false,
            success: function(result){
            	for(var i = 0; i < result.length; i++){
            		data.push(result[i].id);
            	}
            }
        });
        return data;
    };
    
    window.renderTransfer();
    
    window.checkRoles = function() {
        var ids = [];
        var result = transfer.getData('beans-transfer-1');
        for(var i = 0; i < result.length; i++){
        	ids.push(result[i].value);
        }
        $("[name='roleIds']").val(ids.join());
    }
});
</script>
</body>
</html>
